<template>
  <div class="left">
      <ul>
        <li v-for="(item,index) in tankList" :key="index" @click="light(index)" :class="{
            Li:true,
            active:reservreindex==index
            }">{{item.goodsname}}</li>
      </ul>
  </div>
</template>

<script>
//所有的图片必须通过import进行导入
// import image from '../assets/logo.png'
export default {
    data(){
       return {
        //保存点击的下标
        reservreindex:0,
        tankList:[
           {goodsname:'热销'},
           {goodsname:'优惠'},
           {goodsname:'三文鱼'},
           {goodsname:'年货礼品区'},
           {goodsname:'野生大对虾'},
           {goodsname:'冻货区'},
           {goodsname:'贝壳螺类'},
           {goodsname:'鲜虾活鱼'}
        ]
       }
    },
    methods:{
        light(index){
           //保存下标
           this.reservreindex=index
           console.log(index);
        }
    }
}
</script>

<style scoped>
    .left{
        width: 60px;
        height: 442px;
        /* background-color: fuchsia; */
        float: left;
        box-sizing: border-box;
    }
    .left ul{
        list-style: none;
    }
    .left li{
        width: 100%;
        height: 49px;
        /* background-color: tan; */
        font-size: 12px;
        text-align: center;
        line-height: 24px;
        color: rgb(91, 83, 83);
        
    }
    .left Li.active{
        color: red;
        
    }
    .left li:nth-child(2){
        height: 70px;
        line-height: 70px;
        font-size: 14px;

    }
</style>